"use client";
import {
  AlipayOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoOutlined,
  UserOutlined,
  WeiboOutlined,
} from "@ant-design/icons";
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from "@ant-design/pro-components";
import { Button, Divider, Space, Tabs, message, theme } from "antd";
import React, { CSSProperties } from "react";
import { useState } from "react";
import { ProForm } from "@ant-design/pro-form/lib";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/stores";
import { useRouter } from "next/navigation";
import {userLoginUsingPost, userRegisterUsingPost} from "@/api/userController";
import { setLoginUser } from "@/stores/loginUser";
import Link from "next/link";

type LoginType = "account";

const iconStyles: CSSProperties = {
  color: "rgba(0, 0, 0, 0.2)",
  fontSize: "18px",
  verticalAlign: "middle",
  cursor: "pointer",
};

const Page = () => {
  const [form] = ProForm.useForm();
  const dispatch = useDispatch<AppDispatch>();
  const router = useRouter();

  /**
   * 提交
   */
  const userDoRegister = async (values: API.UserRegisterRequest) => {
    try {
      const res = await userRegisterUsingPost(values);
      if (res.data) {
        message.success("注册成功");
        // 保存用户登录状态
        router.push("/user/login");
        form.resetFields();
      }
    } catch (e) {
      // @ts-ignore
      message.error("注册失败，" + e.message);
    }
  };

  const { token } = theme.useToken();
  return (
    <div
      style={{
        backgroundColor: "white",
        height: "100vh",
      }}
    >
      <LoginFormPage
        onFinish={userDoRegister}
        logo="/assets/login.svg"
        backgroundVideoUrl="/assets/book.mp4"
        title="为做而做"
        submitter={{
            searchConfig: {
                submitText: "注册",
            }
        }}
        containerStyle={{
          backgroundColor: "rgba(0, 0, 0,0.65)",
          backdropFilter: "blur(4px)",
        }}
        activityConfig={{
          style: {
            boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.2)",
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: "rgba(255,255,255,0.25)",
            backdropFilter: "blur(4px)",
          },
        }}
      >
            <ProFormText
              name="userAccount"
              fieldProps={{
                size: "large",
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              placeholder={"请输入用户名"}
              rules={[
                {
                  required: true,
                  message: "请输入用户名!",
                },
              ]}
            />
            <ProFormText.Password
              name="userPassword"
              fieldProps={{
                size: "large",
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              placeholder={"请输入密码"}
              rules={[
                {
                  required: true,
                  message: "请输入密码！",
                },
              ]}
            />
           <ProFormText.Password
              name="checkPassword"
              fieldProps={{
                size: "large",
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              placeholder={"请再次输入密码"}
              rules={[
                {
                  required: true,
                  message: "请再次输入密码！",
                },
              ]}
            />
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <div
            style={{
              marginBlockEnd: 14,
              textAlign: "end",
            }}
          >
            已注册 -
            <Link href={"/user/login"}> 去登录</Link>
          </div>
        </div>
      </LoginFormPage>
    </div>
  );
};

// eslint-disable-next-line react/display-name
export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
